<template>
  <oc-select
    row-title="选择一个后端字段"
    :list="dataSource"
    :value="filedIdValue"
    :filterable="true"
    :async-search="true"
    width="650px"
    @change="onValueChange"
  >
    <template #filter>
      <filter-bar
        style="padding: 3px 0px 5px 10px"
        :config="filterBarConfig"
        @change="filterBarChange"
      ></filter-bar>
    </template>
    <template #header></template>
    <template #option="item">
      <div
        class="option-content"
        style="
          padding-bottom: 5px;
          font-size: 16px;
          border-bottom: 1px solid rgb(223, 224, 226);
          display: flex;
          flex-direction: column;
        "
      >
        <span
          ><strong>字段名:{{ item.option.label }}</strong></span
        >
        <div style="display: flex; flex-direction: row; padding-top: 5px">
          <div
            style="
              width: 300px;
              padding-right: 20px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              flex: 1;
            "
            :title="item.option.fieldKey"
          >
            <span>字段Key:{{ item.option.fieldKey }}</span>
          </div>
          <div style="flex: 1">
            <span>字段ID:{{ item.option.fieldId }}</span>
          </div>
        </div>
      </div>
    </template>
  </oc-select>
</template>
<script setup lang="ts">
import { OcSelect } from "@ocean-uikit/vue3";
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
